<template>
  <!-- 
    1. 展示传递过来的数据
    2. 点击预览图片
    3. 长按唤起底部列表
        3.1 需要注册长按指令
 -->
  <div
    class="food_item"
    @click="$router.push({ name: 'FoodDetail', params: { id: f_item.id } })"
  >
    <div class="left-img">
      <slot>
        <img v-lazy="f_item.food_img[0]" @click.stop="showThisImage" />
      </slot>
    </div>
    <ul class="right-text" v-longpress="showActionSheet">
      <li class="food-name">{{ f_item.food_name }}</li>
      <li class="sale-count">已卖出：{{ f_item.sales }}</li>
      <li class="price">价格：{{ f_item.price }}元</li>
    </ul>
  </div>
</template>

<script setup>
import { ImagePreview } from "vant";
import { useStore } from "vuex";
const store = useStore();
const props = defineProps({
  f_item: {
    type: Object,
    require: true,
  },
});
function showThisImage() {
  ImagePreview(props.f_item.food_img);
}

function showActionSheet() {
  store.commit("showActionSheet", {
    list: ["添加收藏", "打赏", "点赞"],
    success: function (index) {
      if (index == 0) {
        console.log("你点击了收藏");
      } else if (index == 1) {
        console.log("你点击了打赏");
      } else if (index == 2) {
        console.log("你点击了点赞");
      }
    },
  });
}
</script>

<style lang="scss" scoped>
.food_item {
  display: flex;
  height: 90px;
  border-bottom: 1px solid lightgray;
  box-sizing: border-box;
  padding: 2px 5px;
  position: relative;
  .left-img {
    width: 110px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .right-text {
    font-size: 12px;
    flex: 1;
    margin-left: 5px;
    @include flexbox(column, space-between);
    .food-name {
      font-weight: bold;
      font-size: 20px;
    }
    .sale-count {
      color: red;
    }
    .price {
      color: blue;
    }
  }
}
</style>